<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>诗境 - 古韵新境</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    
    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        ink: '#333333',
                        cinnabar: '#c41e3a',
                        rice: '#f5f2ea',
                        lightink: '#666666',
                        paper: '#f9f6f0',
                    },
                    fontFamily: {
                        song: ['"Noto Serif SC"', 'serif'],
                        kai: ['"Noto Serif SC"', 'serif'],
                        sans: ['"Noto Sans SC"', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .poem-card-hover {
                transition: all 0.4s ease;
            }
            .poem-card-hover:hover {
                transform: translateY(-8px);
                box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
            }
            .filter-tag-active {
                background-color: #c41e3a;
                color: #f5f2ea;
            }
        }
    </style>
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;600;700;900&display=swap');
        
        /* 滚动动画 */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        .scroll-reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 加载动画 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .animate-fade-in {
            animation: fadeIn 0.8s ease forwards;
        }
    </style>
</head>

<body class="bg-rice text-ink font-sans">
    <!-- 导航栏 -->
    <header id="main-nav" class="fixed top-0 left-0 w-full z-50 transition-all duration-500 py-4">
        <div class="container mx-auto px-4 md:px-8 flex justify-between items-center">
            <!-- Logo -->
            <a href="index.html" class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-full bg-cinnabar flex items-center justify-center">
                    <span class="text-rice font-kai text-xl">古</span>
                </div>
                <span class="text-xl md:text-2xl font-song font-bold">古韵新境</span>
            </a>
            
            <!-- 桌面导航 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="index.html" class="font-song hover:text-cinnabar transition-colors duration-300">首页</a>
                <a href="poems.html" class="font-song text-cinnabar border-b-2 border-cinnabar pb-1">诗境</a>
                <a href="classics.html" class="font-song hover:text-cinnabar transition-colors duration-300">典籍</a>
                <a href="interactive.html" class="font-song hover:text-cinnabar transition-colors duration-300">互动</a>
                <a href="about.html" class="font-song hover:text-cinnabar transition-colors duration-300">关于</a>
                <button class="bg-cinnabar text-rice px-5 py-2 rounded-full hover:bg-opacity-90 transition-all duration-300 transform hover:scale-105">
                    登录 / 注册
                </button>
            </nav>
            
            <!-- 移动端菜单按钮 -->
            <button id="menu-toggle" class="md:hidden text-ink text-2xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-paper absolute top-full left-0 w-full shadow-lg animate-fade-in">
            <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
                <a href="index.html" class="font-song py-2 border-b border-gray-200 hover:text-cinnabar">首页</a>
                <a href="poems.html" class="font-song py-2 border-b border-gray-200 text-cinnabar">诗境</a>
                <a href="classics.html" class="font-song py-2 border-b border-gray-200 hover:text-cinnabar">典籍</a>
                <a href="interactive.html" class="font-song py-2 border-b border-gray-200 hover:text-cinnabar">互动</a>
                <a href="about.html" class="font-song py-2 hover:text-cinnabar">关于</a>
                <button class="bg-cinnabar text-rice px-5 py-3 rounded-full hover:bg-opacity-90 transition-all duration-300">
                    登录 / 注册
                </button>
            </div>
        </div>
    </header>

    <main class="pt-24 pb-16">
        <!-- 页面标题 -->
        <section class="container mx-auto px-4 mb-12">
            <div class="flex flex-col md:flex-row md:items-end justify-between">
                <div>
                    <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-song font-bold mb-2">诗境</h1>
                    <p class="text-lightink max-w-2xl">探索古典诗词的意境之美，感受千年文字的力量与温度</p>
                </div>
                <div class="mt-4 md:mt-0">
                    <div class="relative">
                        <input type="text" placeholder="搜索诗词或作者..." class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-cinnabar focus:border-transparent w-full md:w-64">
                        <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-lightink"></i>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 筛选区 -->
        <section class="container mx-auto px-4 mb-10 scroll-reveal">
            <div class="bg-paper p-6 rounded-xl shadow-sm">
                <!-- 朝代筛选 -->
                <div class="mb-6">
                    <h3 class="font-song font-bold mb-3 text-lg">朝代</h3>
                    <div class="flex flex-wrap gap-2">
                        <button class="filter-tag-active px-4 py-2 rounded-full text-sm transition-all duration-300">全部</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">唐</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">宋</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">元</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">明</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">清</button>
                    </div>
                </div>
                
                <!-- 主题筛选 -->
                <div class="mb-6">
                    <h3 class="font-song font-bold mb-3 text-lg">主题</h3>
                    <div class="flex flex-wrap gap-2">
                        <button class="filter-tag-active px-4 py-2 rounded-full text-sm transition-all duration-300">全部</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">山水</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">边塞</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">思乡</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">爱情</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">咏史</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">田园</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">离别</button>
                    </div>
                </div>
                
                <!-- 体裁筛选 -->
                <div>
                    <h3 class="font-song font-bold mb-3 text-lg">体裁</h3>
                    <div class="flex flex-wrap gap-2">
                        <button class="filter-tag-active px-4 py-2 rounded-full text-sm transition-all duration-300">全部</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">五言绝句</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">七言绝句</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">五言律诗</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">七言律诗</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">词</button>
                        <button class="bg-rice hover:bg-gray-200 px-4 py-2 rounded-full text-sm transition-all duration-300">曲</button>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 热门诗人 -->
        <section class="container mx-auto px-4 mb-16 scroll-reveal">
            <h2 class="text-2xl font-song font-bold mb-6">热门诗人</h2>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
                <!-- 诗人1 -->
                <a href="poet-detail.html" class="text-center group">
                    <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                        <img src="https://picsum.photos/id/64/200/200" alt="李白头像" class="w-full h-full object-cover">
                    </div>
                    <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">李白</h3>
                    <p class="text-xs text-lightink">唐代</p>
                </a>
                
                <!-- 诗人2 -->
                <a href="poet-detail.html" class="text-center group">
                    <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                        <img src="https://picsum.photos/id/65/200/200" alt="杜甫头像" class="w-full h-full object-cover">
                    </div>
                    <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">杜甫</h3>
                    <p class="text-xs text-lightink">唐代</p>
                </a>
                
                <!-- 诗人3 -->
                <a href="poet-detail.html" class="text-center group">
                    <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                        <img src="https://picsum.photos/id/66/200/200" alt="王维头像" class="w-full h-full object-cover">
                    </div>
                    <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">王维</h3>
                    <p class="text-xs text-lightink">唐代</p>
                </a>
                
                <!-- 诗人4 -->
                <a href="poet-detail.html" class="text-center group">
                    <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                        <img src="https://picsum.photos/id/67/200/200" alt="白居易头像" class="w-full h-full object-cover">
                    </div>
                    <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">白居易</h3>
                    <p class="text-xs text-lightink">唐代</p>
                </a>
                
                <!-- 诗人5 -->
                <a href="poet-detail.html" class="text-center group">
                    <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                        <img src="https://picsum.photos/id/68/200/200" alt="苏轼头像" class="w-full h-full object-cover">
                    </div>
                    <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">苏轼</h3>
                    <p class="text-xs text-lightink">宋代</p>
                </a>
                
                <!-- 诗人6 -->
                <a href="poet-detail.html" class="text-center group">
                    <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                        <img src="https://picsum.photos/id/69/200/200" alt="李清照头像" class="w-full h-full object-cover">
                    </div>
                    <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">李清照</h3>
                    <p class="text-xs text-lightink">宋代</p>
                </a>
            </div>
        </section>
        
        <!-- 诗词列表 -->
        <section class="container mx-auto px-4">
            <h2 class="text-2xl font-song font-bold mb-6 scroll-reveal">诗词精选</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 诗词1 -->
                <a href="poem-detail.html" class="bg-paper rounded-xl overflow-hidden shadow-sm poem-card-hover scroll-reveal" style="transition-delay: 0.1s">
                    <div class="relative h-52 overflow-hidden">
                        <img src="https://picsum.photos/id/29/600/400" alt="静夜思场景图" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute top-3 left-3 bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">唐·五言绝句</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">静夜思</h3>
                        <p class="text-lightink text-sm mb-4">李白</p>
                        <p class="font-kai text-ink/80 mb-4">床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex space-x-3">
                                <span class="text-lightink text-sm"><i class="fa fa-eye mr-1"></i> 2.3k</span>
                                <span class="text-lightink text-sm"><i class="fa fa-heart-o mr-1"></i> 568</span>
                            </div>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors">
                                查看详情 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                </a>
                
                <!-- 诗词2 -->
                <a href="poem-detail.html" class="bg-paper rounded-xl overflow-hidden shadow-sm poem-card-hover scroll-reveal" style="transition-delay: 0.2s">
                    <div class="relative h-52 overflow-hidden">
                        <img src="https://picsum.photos/id/110/600/400" alt="望庐山瀑布场景图" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute top-3 left-3 bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">唐·七言绝句</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">望庐山瀑布</h3>
                        <p class="text-lightink text-sm mb-4">李白</p>
                        <p class="font-kai text-ink/80 mb-4">日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex space-x-3">
                                <span class="text-lightink text-sm"><i class="fa fa-eye mr-1"></i> 1.8k</span>
                                <span class="text-lightink text-sm"><i class="fa fa-heart-o mr-1"></i> 423</span>
                            </div>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors">
                                查看详情 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                </a>
                
                <!-- 诗词3 -->
                <a href="poem-detail.html" class="bg-paper rounded-xl overflow-hidden shadow-sm poem-card-hover scroll-reveal" style="transition-delay: 0.3s">
                    <div class="relative h-52 overflow-hidden">
                        <img src="https://picsum.photos/id/164/600/400" alt="春望场景图" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute top-3 left-3 bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">唐·五言律诗</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">春望</h3>
                        <p class="text-lightink text-sm mb-4">杜甫</p>
                        <p class="font-kai text-ink/80 mb-4">国破山河在，城春草木深。感时花溅泪，恨别鸟惊心。烽火连三月，家书抵万金。白头搔更短，浑欲不胜簪。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex space-x-3">
                                <span class="text-lightink text-sm"><i class="fa fa-eye mr-1"></i> 1.5k</span>
                                <span class="text-lightink text-sm"><i class="fa fa-heart-o mr-1"></i> 387</span>
                            </div>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors">
                                查看详情 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                </a>
                
                <!-- 诗词4 -->
                <a href="poem-detail.html" class="bg-paper rounded-xl overflow-hidden shadow-sm poem-card-hover scroll-reveal" style="transition-delay: 0.1s">
                    <div class="relative h-52 overflow-hidden">
                        <img src="https://picsum.photos/id/137/600/400" alt="江雪场景图" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute top-3 left-3 bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">唐·五言绝句</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">江雪</h3>
                        <p class="text-lightink text-sm mb-4">柳宗元</p>
                        <p class="font-kai text-ink/80 mb-4">千山鸟飞绝，万径人踪灭。孤舟蓑笠翁，独钓寒江雪。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex space-x-3">
                                <span class="text-lightink text-sm"><i class="fa fa-eye mr-1"></i> 1.2k</span>
                                <span class="text-lightink text-sm"><i class="fa fa-heart-o mr-1"></i> 312</span>
                            </div>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors">
                                查看详情 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                </a>
                
                <!-- 诗词5 -->
                <a href="poem-detail.html" class="bg-paper rounded-xl overflow-hidden shadow-sm poem-card-hover scroll-reveal" style="transition-delay: 0.2s">
                    <div class="relative h-52 overflow-hidden">
                        <img src="https://picsum.photos/id/129/600/400" alt="山居秋暝场景图" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute top-3 left-3 bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">唐·五言律诗</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">山居秋暝</h3>
                        <p class="text-lightink text-sm mb-4">王维</p>
                        <p class="font-kai text-ink/80 mb-4">空山新雨后，天气晚来秋。明月松间照，清泉石上流。竹喧归浣女，莲动下渔舟。随意春芳歇，王孙自可留。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex space-x-3">
                                <span class="text-lightink text-sm"><i class="fa fa-eye mr-1"></i> 1.7k</span>
                                <span class="text-lightink text-sm"><i class="fa fa-heart-o mr-1"></i> 456</span>
                            </div>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors">
                                查看详情 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                </a>
                
                <!-- 诗词6 -->
                <a href="poem-detail.html" class="bg-paper rounded-xl overflow-hidden shadow-sm poem-card-hover scroll-reveal" style="transition-delay: 0.3s">
                    <div class="relative h-52 overflow-hidden">
                        <img src="https://picsum.photos/id/142/600/400" alt="水调歌头·明月几时有场景图" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute top-3 left-3 bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">宋·词</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">水调歌头·明月几时有</h3>
                        <p class="text-lightink text-sm mb-4">苏轼</p>
                        <p class="font-kai text-ink/80 mb-4">明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？</p>
                        <div class="flex justify-between items-center">
                            <div class="flex space-x-3">
                                <span class="text-lightink text-sm"><i class="fa fa-eye mr-1"></i> 2.1k</span>
                                <span class="text-lightink text-sm"><i class="fa fa-heart-o mr-1"></i> 621</span>
                            </div>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors">
                                查看详情 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                </a>
            </div>
            
            <!-- 加载更多 -->
            <div class="text-center mt-12 scroll-reveal">
                <button id="load-more" class="border-2 border-ink text-ink px-8 py-3 rounded-full hover:bg-ink hover:text-rice transition-all duration-300 font-song">
                    加载更多 <i class="fa fa-refresh ml-2"></i>
                </button>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-ink text-rice py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <div class="w-10 h-10 rounded-full bg-cinnabar flex items-center justify-center">
                            <span class="text-rice font-kai text-xl">古</span>
                        </div>
                        <span class="text-xl font-song font-bold">古韵新境</span>
                    </div>
                    <p class="text-rice/70 mb-6">让古典文学活起来，用现代方式感受传统文化魅力</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-wechat text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-instagram text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="index.html" class="text-rice/70 hover:text-cinnabar transition-colors">首页</a></li>
                        <li><a href="poems.html" class="text-rice/70 hover:text-cinnabar transition-colors">诗境</a></li>
                        <li><a href="classics.html" class="text-rice/70 hover:text-cinnabar transition-colors">典籍</a></li>
                        <li><a href="interactive.html" class="text-rice/70 hover:text-cinnabar transition-colors">互动体验</a></li>
                        <li><a href="about.html" class="text-rice/70 hover:text-cinnabar transition-colors">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">互动功能</h4>
                    <ul class="space-y-3">
                        <li><a href="soundscape.html" class="text-rice/70 hover:text-cinnabar transition-colors">声景体验</a></li>
                        <li><a href="painting.html" class="text-rice/70 hover:text-cinnabar transition-colors">诗画创作</a></li>
                        <li><a href="dialogue.html" class="text-rice/70 hover:text-cinnabar transition-colors">古今对话</a></li>
                        <li><a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">用户作品</a></li>
                        <li><a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">创作活动</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">联系我们</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-envelope-o mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">contact@guyunxinjing.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">+86 123 4567 8910</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">北京市海淀区中关村南大街5号</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-rice/20 pt-8 text-center text-rice/50 text-sm">
                <p>© 2023 古韵新境 - 古典文学革新平台 版权所有 | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-8 right-8 bg-cinnabar text-rice w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 z-50">
        <i class="fa fa-arrow-up"></i>
    </button>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        $(window).scroll(function() {
            const nav = $('#main-nav');
            if ($(window).scrollTop() > 50) {
                nav.addClass('nav-scrolled');
            } else {
                nav.removeClass('nav-scrolled');
            }
            
            // 回到顶部按钮显示/隐藏
            const backToTop = $('#back-to-top');
            if ($(window).scrollTop() > 300) {
                backToTop.removeClass('opacity-0 invisible').addClass('opacity-100 visible');
            } else {
                backToTop.removeClass('opacity-100 visible').addClass('opacity-0 invisible');
            }
            
            // 滚动显示动画
            $('.scroll-reveal').each(function() {
                const revealTop = $(this).offset().top;
                const windowHeight = $(window).height();
                const scrollTop = $(window).scrollTop();
                
                if (revealTop < scrollTop + windowHeight - 100) {
                    $(this).addClass('active');
                }
            });
        });
        
        // 移动端菜单切换
        $('#menu-toggle').click(function() {
            $('#mobile-menu').toggleClass('hidden');
            $(this).find('i').toggleClass('fa-bars fa-times');
        });
        
        // 回到顶部功能
        $('#back-to-top').click(function() {
            $('html, body').animate({ scrollTop: 0 }, 600);
        });
        
        // 筛选标签切换
        $('.filter-tag-active, .bg-rice.hover\\:bg-gray-200').click(function() {
            // 找到同级的所有标签
            const siblings = $(this).siblings();
            
            // 移除所有标签的活跃状态
            $(this).removeClass('filter-tag-active bg-rice hover:bg-gray-200');
            siblings.removeClass('filter-tag-active').addClass('bg-rice hover:bg-gray-200');
            
            // 给当前点击的标签添加活跃状态
            $(this).addClass('filter-tag-active');
        });
        
        // 加载更多功能
        $('#load-more').click(function() {
            // 显示加载状态
            $(this).html('<i class="fa fa-spinner fa-spin mr-2"></i> 加载中...');
            
            // 模拟加载延迟
            setTimeout(() => {
                // 恢复按钮状态
                $(this).html('加载更多 <i class="fa fa-refresh ml-2"></i>');
                
                // 这里可以添加实际加载更多内容的逻辑
                alert('已加载全部内容');
            }, 1500);
        });
        
        // 页面加载完成后初始化
        $(document).ready(function() {
            // 触发一次滚动事件，初始化导航栏状态
            $(window).trigger('scroll');
        });
    </script>
</body>
</html>
